<template>
  <zm-dialog
    title="修改密码"
    :visible.sync="value"
    append-to-body
    :before-close="dialogClose"
    :close-on-click-modal="false"
  >
    <!-- <el-form
      class="user-form"
      size="small"
      label-width="100px"
      :model="form"
      :rules="rules"
      ref="form"
    > -->
    <zm-form
      class="ml20"
      :model="form"
      ref="form"
      :rules="rules"
      label-width="100px"
      label-position="right"
    >
      <el-form-item label="原密码" prop="oldPassword">
        <el-input
          placeholder="请输入原密码"
          type="password"
          v-model.trim="form.oldPassword"
        />
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input
          placeholder="请输入新密码"
          type="password"
          v-model.trim="form.newPassword"
        />
      </el-form-item>
      <el-form-item label="确认新密码" prop="rePassword">
        <el-input
          placeholder="请再次输入新密码"
          type="password"
          v-model.trim="form.rePassword"
        />
      </el-form-item>
      <!-- <el-form-item>
        <el-button type="primary" @click="submit" class="wp100">确定</el-button>
      </el-form-item> -->
    </zm-form>
    <div slot="footer" class="tr">
      <zm-button @click="dialogClose" type="info">取消</zm-button>
      <zm-button @click="submit" type="primary">确定</zm-button>
    </div>
  </zm-dialog>
</template>

<script>
import { mapActions } from 'vuex'
import dialogMixin from '@/mixins/dialogMixin'
import { setPassWord } from '@/api/src/systemAccount'

export default {
  mixins: [dialogMixin],
  data () {
    const passwordValidator = (rule, value, callback, source, options) => {
      let errors = []
      if (value && !/^[^\u4e00-\u9fa5]{6,20}$/.test(value)) {
        errors.push(rule.message || '密码必须为6-20位非中文字符')
      }
      callback(errors)
    }
    const rePasswordValidator = (rule, value, callback, source, options) => {
      let errors = []
      if (value && value !== this.form.newPassword) {
        errors.push(rule.message || '两次新密码不一致')
      }
      callback(errors)
    }
    return {
      form: {
        oldPassword: '',
        newPassword: '',
        rePassword: ''
      },
      rules: {
        oldPassword: [{ required: true, message: '请输入原密码' }],
        newPassword: [
          { required: true, message: '请输入新密码' },
          { validator: passwordValidator }
        ],
        rePassword: [
          { required: true, message: '请再次输入新密码' },
          { validator: rePasswordValidator }
        ]
      }
    }
  },
  methods: {
    ...mapActions(['LogOut']),
    submit () {
      this.$refs.form.validate().then(async () => {
        await setPassWord({ ...this.form, ...{ id: this.id } })
        this.$message.success('修改密码成功')
        this.dialogClose()
        await this.LogOut()
        this.$router.push(`/login`)
      })
    }
  }
}
</script>
